plots_json = plots_data_r
geo_data = JSON.parse(geojson_text_r)
// Create a reactive variable for selected polygon
mutable selected_polygon_id = null
// Filter plots by selected species
filtered_plots = plots_json.filter(d => d.species === selected_species)// Species selector
viewof selected_species = Inputs.select(
["Species A", "Species B", "Species C"],
{label: "Select Species:", value: "Species A"}
)// Display the selected plot
plot_display = {
if (selected_polygon_id === null) {
return html`<div style="padding: 20px; text-align: center; color: #666;">
<p>Click on a polygon to view the plot</p>
</div>`;
}
const plot = filtered_plots.find(d => d.polygon_id === selected_polygon_id);
if (!plot) {
return html`<div style="padding: 20px;">No plot available</div>`;
}
return html`<div style="text-align: center;">
<h4>${plot.species} - ${plot.polygon_name}</h4>
<img src="${plot.image}" style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px;">
</div>`;
}// Create the map
map_container = {
const container = DOM.element('div', { style: 'height: 100%; width: 100%;' });
yield container;
// Small delay to ensure container is in DOM
await new Promise(resolve => setTimeout(resolve, 100));
const map = L.map(container, {
zoomSnap: 0.25,
zoomDelta: 0.5,
wheelPxPerZoomLevel: 120
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const geojsonLayer = L.geoJSON(geo_data, {
style: {
fillColor: 'blue',
fillOpacity: 0.3,
color: 'black',
weight: 1
},
onEachFeature: function(feature, layer) {
layer.on({
click: function(e) {
// Update selected polygon
mutable selected_polygon_id = feature.properties.polygon_id;
// Reset all styles
geojsonLayer.eachLayer(l => {
l.setStyle({
fillColor: 'blue',
fillOpacity: 0.3,
weight: 1
});
});
// Highlight selected
layer.setStyle({
fillColor: 'red',
fillOpacity: 0.5,
weight: 3
});
},
mouseover: function(e) {
if (feature.properties.polygon_id !== selected_polygon_id) {
layer.setStyle({
fillOpacity: 0.5,
weight: 2
});
}
},
mouseout: function(e) {
if (feature.properties.polygon_id !== selected_polygon_id) {
layer.setStyle({
fillOpacity: 0.3,
weight: 1
});
}
}
});
}
}).addTo(map);
// Fit bounds with padding and then invalidate size
const bounds = geojsonLayer.getBounds();
map.fitBounds(bounds, { padding: [20, 20] });
// Force map to recalculate its size
setTimeout(() => map.invalidateSize(), 200);
}